import React, { useState, useMemo } from "react"
import { Card, Form, Button, Toast, Modal, Popup, Divider } from 'antd-mobile'
import './index.css'
import { httpJson } from "../../../../../services/http"

interface IProps {
    currentKey: string
    props: any
    refresh?: any
}

const NormalCard: React.FC<IProps> = ({ currentKey, props, refresh }) => {
    const { companyName, deliveryAddress, deliverTime, totalSubOrder, companyId, orderId } = props
    const [res, setRes] = useState([])
    const [visible, setVisible] = useState<boolean>(false)
    const handleDeliver = async () => {
        httpJson('GET', 'api/order/updateMerchantOrderStatus', { orderId: orderId, orderStatus: '1' })
            .then(res => {
                Toast.show('操作成功！')
                refresh()
            })
            .catch(err => {
                Toast.show(err)
                console.log(err)
            })
    }
    const handleSend = async () => {
        httpJson('GET', 'api/order/updateMerchantOrderStatus', { orderId: orderId, orderStatus: '2' })
            .then(res => {
                Toast.show('确认送达成功！')
                refresh()
            })
            .catch(err => {
                Toast.show(err)
                console.log(err)
            })
    }

    const handleClick = async () => {
        httpJson('GET', 'api/suborder/getSubOrderList', { companyId: companyId })
            .then((res: any) => {
                console.log(res.data.data)
                setRes(res.data.data)
                setVisible(true)
            })
            .catch(err => {
                Toast.show(err)
                console.log(err)
            })
    }
    const renderBtn = useMemo(() => {
        switch (currentKey) {
            case '1':
                return <Button color="primary" className="confirm-btn" size='mini' shape='rounded' onClick={handleDeliver}>确认出餐</Button>
            case '2':
                return <Button color="primary" className="confirm-btn" size='mini' shape='rounded' onClick={handleSend}>确认送达</Button>
            default:
                return
        }
    }, [currentKey])

    return (
        <><Card
            title={<div style={{ fontWeight: 'normal' }}>
                #01 {companyName}
            </div>}
            style={{ borderRadius: 0 }}
        >
            <div className="content">
                <Form.Item label='配送地址'>
                    {deliveryAddress}
                    {renderBtn}
                </Form.Item>
                <Form.Item label='配送时间'>
                    {deliverTime || '12:00'}前送达
                    <span className="order-sum">{totalSubOrder}笔订单</span>
                </Form.Item>
            </div>
            <div className="footer" onClick={handleClick}>
                查看团餐订单
            </div>
        </Card>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false)
                }}
                bodyStyle={{ height: '60vh' }}
            >
                <div style={{ padding: 20, textAlign: 'center', fontSize: 18 }}>
                    <p>招银云创信息技术有限公司</p>
                    <Divider></Divider>
                    <p>#1 有骨气培根虾仁炒饭+蒸蛋 ￥15.8</p>
                    <Divider></Divider>
                    <p>#2 有骨气培根虾仁炒饭+蒸蛋 ￥15.8</p>
                    <Divider></Divider>
                    <p>#3 有骨气培根虾仁炒饭+蒸蛋 ￥15.8</p>
                    <Divider></Divider>
                    <p>#4 有骨气培根虾仁炒饭+蒸蛋 ￥15.8</p>
                    <Divider></Divider>
                </div>
            </Popup>
        </>
    )
}

export default NormalCard